<!DOCTYPE html>
<html>

<head>
    <!-- 感觉目前这一套是有一点东西的，但是东西不多 -->
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.5/mediapipe/holistic/camera_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.5/mediapipe/holistic/control_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.5/mediapipe/holistic/drawing_utils.js"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/electroluxasset@1.0.5/mediapipe/holistic/holistic.js"
        crossorigin="anonymous"></script>
    <style>
        .container {
            width: 200px;
            position: fixed;
        }
    </style>
</head>

<body>
    <div class="container">
        <video class="input_video"></video>
        <button id="save">保存向量</button>
        <button id="test">判断目前相似度</button>
    </div>

    <script type="module">
        const videoElement = document.getElementsByClassName('input_video')[0];




        function cosine_similarity(param_a, param_b, param_depth) {
            // 求点积
            console.log(param_a, param_b, param_depth)
            let plus_sum = 0;
            for (let i = 0; i < param_depth; i++) {
                let tempAB = param_a[i] * param_b[i];
                plus_sum += tempAB;
            }
            // 求 A 模长
            let paramA_temp_length = 0;
            for (let i = 0; i < param_depth; i++) {
                paramA_temp_length += Math.pow(param_a[i], 2);
            }
            let paramA_length = Math.pow(paramA_temp_length, 0.5);

            // 求 B 模长
            let paramB_temp_length = 0;
            for (let i = 0; i < param_depth; i++) {
                paramB_temp_length += Math.pow(param_b[i], 2);
            }
            let paramB_length = Math.pow(paramB_temp_length, 0.5);
            let result = plus_sum / (paramA_length * paramB_length);
            return result;
        }

        // 传参传过来3个 object
        function countAngle(temp1, temp2, temp3) {
            if (!temp1 || !temp2 || !temp3) {
                // console.log(temp1,temp2,temp3)
                return 0
            }
            let point1 = [temp1.x * 100, temp1.y * 100, temp1.z * 100]
            let point2 = [temp2.x * 100, temp2.y * 100, temp2.z * 100]
            let point3 = [temp3.x * 100, temp3.y * 100, temp3.z * 100]
            // 1.先求 point1 和point2之间的距离
            let temp12 = Math.pow((point1[0] - point2[0]), 2) + Math.pow((point1[1] - point2[1]), 2) + Math.pow((point1[2] - point2[2]), 2)
            let point12 = Math.pow(temp12, 0.5)
            // console.log(point12)
            let temp23 = Math.pow((point3[0] - point2[0]), 2) + Math.pow((point3[1] - point2[1]), 2) + Math.pow((point3[2] - point2[2]), 2)
            let point23 = Math.pow(temp23, 0.5)
            // console.log(point23)

            // 2.求向量 
            let vector12 = [(point1[0] - point2[0]), (point1[1] - point2[1]), (point1[2] - point2[2])]
            let vector23 = [(point3[0] - point2[0]), (point3[1] - point2[1]), (point3[2] - point2[2])]


            //3.求arccos 
            let top = vector12[0] * vector23[0] + vector12[1] * vector23[1] + vector12[2] * vector23[2]
            let bottom = point12 * point23

            // 4.最后求解
            // console.log(Math.acos(top / bottom))
            return Math.acos(top / bottom)
        }
        let vector = null
        function onResults(results) {
            // console.log(results?.poseLandmarks)
            try {
                let left_vector = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[5], results?.poseLandmarks[8])
                let right_vector = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[2], results?.poseLandmarks[7])
                let center_vector = countAngle(results?.poseLandmarks[10], results?.poseLandmarks[0], results?.poseLandmarks[9])

                let random1 = countAngle(results?.poseLandmarks[8], results?.poseLandmarks[6], results?.poseLandmarks[0])
                let random2 = countAngle(results?.poseLandmarks[8], results?.poseLandmarks[4], results?.poseLandmarks[0])

                let random3 = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[1], results?.poseLandmarks[7])
                let random4 = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[3], results?.poseLandmarks[7])

                let random5 = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[10], results?.poseLandmarks[9])
                let random6 = countAngle(results?.poseLandmarks[0], results?.poseLandmarks[9], results?.poseLandmarks[10])

                let randomArr = []
                let randomArrs = []
                if (!results.faceLandmarks) {
                    return
                }
                for (let i = 2; i < results.faceLandmarks.length - 100; i++) {
                    if (results?.faceLandmarks[i] && results?.faceLandmarks[i + 1] && results?.faceLandmarks[1]) {
                        randomArr = []
                        // console.log(i,results?.faceLandmarks[i],    results?.faceLandmarks[1],results?.faceLandmarks[i+1])
                        randomArrs.push(countAngle(results?.faceLandmarks[i], results?.faceLandmarks[1], results?.faceLandmarks[i + 1]))
                    }
                    //    console.log(results.faceLandmarks)
                }
                // console.log(randomArrs)

                let res = JSON.parse(JSON.stringify(randomArrs))
                // for(let i in results?.poseLandmarks[10])

                vector = [left_vector, center_vector, right_vector, random1, random2, random3, random4, random5, random6, ...res]
                vector = vector.map((e) => {
                    return e * 1000
                })
                // console.log(res)
            }
            catch (e) {
                console.log(e)
            }
            // console.log(vector)
        }

        const holistic = new Holistic({
            locateFile: (file) => {
                console.log(file, "file")
                return `https://cdn.jsdelivr.net/npm/electroluxasset@1.0.5/mediapipe/holistic/locate/${file}`;
            }
        });
        holistic.setOptions({
            modelComplexity: 1,
            smoothLandmarks: true,
            enableSegmentation: true,
            smoothSegmentation: true,
            refineFaceLandmarks: true,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });
        holistic.onResults(onResults);

        const camera = new Camera(videoElement, {
            onFrame: async () => {
                await holistic.send({ image: videoElement });
            },
            width: 200,
            height: 190
        });


        camera.start();

        document.querySelector("#save").addEventListener("click", () => {
            console.log(vector)
            localStorage.setItem("similarity", JSON.stringify(vector))

        })

        document.querySelector("#test").addEventListener("click", () => {
            let prev = JSON.parse(localStorage.getItem("similarity"))
            console.log(cosine_similarity(prev, vector, 300))

        })

    </script>

</body>

</html>